<template>
  <div id="LifeTeacherMutual" class="">
    <div class="head">
      <p class="col-sm-3">专业:</p>
      <select class="col-sm-3" v-model="selectedMajor">
        <option v-for="major in majors">{{major.professionName}}</option>
      </select>
      <p class="col-sm-3">班级:</p>
      <select class="col-sm-3"  v-model="selectedClass">
        <option v-for="classNumber in classNumbers">{{classNumber.className}}</option>
      </select>
    </div>
    <div class="myTable table-responsive">
      <table class="table">
        <thead>
        <tr>
          <th class="text-center">学号</th>
          <th class="text-center">姓名</th>
          <th class="text-center">评价</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(classNum,index) in classNums">
          <td>{{classNum.stuNumber}}</td>
          <td>{{classNum.stuName}}</td>
          <td>
            <label class="radio-inline">
              <input type="radio" value="A" v-model="picked[index]" v-bind:name="classNum.id"> A
            </label>
            <label class="radio-inline">
              <input type="radio" value="B" v-model="picked[index]" v-bind:name="classNum.id"> B
            </label>
            <label class="radio-inline">
              <input type="radio" value="C" v-model="picked[index]" v-bind:name="classNum.id"> C
            </label>
            <label class="radio-inline">
              <input type="radio" value="D" v-model="picked[index]" v-bind:name="classNum.id"> D
            </label>
          </td>
        </tr>
        </tbody>
      </table>
      <h5 class="bg-info" style="padding: 10px;background: none">注:只显示还未评价的同学</h5>
      <button class="btn btn-success btn-lg" @click='submit()'>提交</button>
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'
  import '../../node_modules/bootstrap/dist/js/bootstrap.min'
  import API from '../config/request';
  import {decodeData} from '../config/base64'
  export default {
    name: 'counselor',
    data () {
      return {
        url: API.URL,
        majors: [],
        classNumbers: [],
        allClass:[],
        selectedMajor: '',
        selectedClass: '',
        grades: [],
        identity: '1',
        classId:'1',
        stuId:'',
        classNums:'',
        picked: []
      }
    },
    created () {
      this.getMajor()
      this.getAllClass()
      this.download = API.DownLoad
      this.studentNo = decodeData(localStorage.getItem('studentNo'))
      this.classId = decodeData(localStorage.getItem('classId'))
      this.identity = decodeData(localStorage.getItem('identity'))

    },
    mounted(){
    },
    watch: {
      selectedMajor: function (newValue) {
        this.getClass(newValue)
      },
      selectedClass: function (newValue) {
        this.getAll(newValue)
      },
      classId: function (newValue) {
        console.log("new:"+newValue)
        this.getUndo()
      }
    },
    methods: {
      getMajor: function () {
        this.$http.get(this.url + 'common/listprofession').then(function (response) {
          this.selectedMajor = response.body[0].professionName
          this.majors = response.body
          this.newProfession = response.body[0].id
        })
      },
      getAllClass:function () {
        this.$http.get(this.url + 'common/getclass').then(function (response) {
          this.allClass = response.body
        })
      },

      getClass: function (select) {
        let id = 1
        for (let i = 0; i < this.majors.length; i++) {
          //  数据库内有/r/n
          if (select.trim() === this.majors[i].professionName.trim()) {
            id = this.majors[i].id
          }
        }
        this.$http.get(this.url + 'common/getallclass?professionId=' + id).then(function (response) {
          this.classNumbers = response.body
          this.selectedClass = response.body[0].className
        })
      },
      //拿到评价小组成员
      getAll: function (select) {
        let id = 1
        for (let i = 0; i < this.allClass.length; i++) {
          //  数据库内有/r/n
          if (select == this.allClass[i].className) {
            id = this.allClass[i].id
          }
        }
        this.classId = id
        this.$http.get(this.url + 'common/listclassadmin?classId=' + id).then(function (response) {
          let j = 0
          for (let i = 0; i < response.body.length; i++) {
            if (response.body[i].identity == 1) {
              this.headTeacher = response.body[i].stuNum
            } else if (response.body[i].identity == 2) {
              this.monitor = response.body[i].stuNum

            } else {
              this.commentators[j] = response.body[i].stuNum
              j++
            }
          }
          if(response.body.length == 0){
            this.headTeacher = ''
            this.monitor = ''
            this.commentators = []
          }
        })
      },
      //拿还未评价的学生
      getUndo: function () {
        this.$http.get(this.url + 'evaluation/getnotevaluate?stuId='+this.studentNo +'&classId='+this.classId).then(function (response) {
          this.classNums = response.body
        }, function () {
          alert("班级信息获取失败")
        })
      },
      //拿所有
      getClassInfo: function () {
        this.$http.get(this.url + 'common/listclassStudent?classId=' + this.classId).then(function (response) {
          this.classNums = response.body
          console.log(this.classNums)
        }, function () {
          alert("班级信息获取失败")
        })
      },
      submit: function () {
        let self = this
        let tip = 0
        let promise = new Promise(function (resolve, reject) {
          for (let i in self.picked) {
            let data = {
              'evaluatorNum': self.studentNo,
              'beEvaluatedNum': self.classNums[i].stuNumber,
              'grade': self.picked[i],
              'identity' : self.identity
            }
            self.$http.post(self.url + 'evaluation/create', data,
              {emulateJSON: true}
            ).then(function () {
              ++tip
              self.getUndo()
            },function () {
              alert(i.stuNumber + ',提交失败')
            })
          }
          resolve()
        })
        promise.then(function () {
          setTimeout(function(){
            alert('提交成功'+tip+'人')
          },500)   //无法保证同步完成，只好设置延迟，原则上可以
        })
      },
      doModal(){
        $('.modal').modal('toggle');
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
  .head{
    width: 100%;
    height: 150px;
  }
  .center{
    width: 100%;
    height: 500px;
    display: block;
  }
  .myTable{
    width: 100%;
    display: block;
  }
  .spinner {
    width: 60px;
    height: 60px;
    position: relative;
    margin: 50px auto;
  }

  .double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #67CF22;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out;
  }

  .double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
  }

  @-webkit-keyframes bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
  }
  @keyframes bounce {
    0%, 100% {
      transform: scale(0.0);
      -webkit-transform: scale(0.0);
    } 50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
  }
  @media screen and (min-width: 800px){
    .head{
      width: 100%;
      height: 50px;
      display: block;
    }
    .center{
      width: 100%;
      height: 250px;
      display: block;
    }
    .myTable{
      width: 100%;
      display: block;
    }
  }


</style>
